<template>
  <div class="flex" style="height: 100vh;
    background: rgb(51 51 51);">
    <div class="qr-code">
      <p class="qr-title">K手登录</p>
      <div class="qr-code-main" style="height: 280px; width: 280px;">
        <img :src="code.data" alt="二维码图片" width="280px">
      </div>
      <div class="qr-refresh-text"> 请用K手扫描二维码登录</div>
    </div>
  </div>
</template>

<script>
  import { getKsCode } from "@/api/digitalHumanManagement/taskList";
  export default {
    name: "index",
    data(){
      return {
        // 快手二维码
        code:''
      }
    },
    name: "static-code",
    props: {
      //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手
      // type:Number
    },
    created(){
      this.show()
    },
    methods:{
      async show(){
        console.log("this.$route.query.id=====",this.$route.query.id)
        // 获取K手静态二维码
        this.code =await getKsCode(this.$route.query.id)
        console.log("code===============",this.code)
      },
    }
  }
</script>


<style scoped lang="less">
  /*  K手二维码*/
  .qr-code {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 380px;
    height: 536px;
    background: #fff;
    .qr-title {
      height: 45px;
      font-size: 32px;
      font-weight: 400;
      color: #222;
      line-height: 45px;
      margin: 52px auto 27px;
    }
    .qr-code-main {
      position: relative;
    }
    .qr-refresh-text {
      margin-top: 10px;
      width: 242px;
      font-size: 22px;
      font-weight: 400;
      color: #222;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
